<template>
  <div class="con" ref="conPlay" v-if="Object.keys(detail).length">
    <div class="bg" :style="`background-image: url('${detail.al.picUrl}?param=500y500')`"></div>

    <header>
      <div class="back">
        <van-icon name="arrow-down" />
      </div>
      <div class="title">
        <p class="primary">{{ detail.name }}</p>
        <p class="artist">{{ artist }}</p>
      </div>
      <div class="share"><van-icon name="share-o" /></div>
    </header>

    <main>
      <div>
        <div class="aag">
          <img src="/public/images/aag.png" alt="" :class="play ? 'play' : ''" />
        </div>
        <div class="picture" :style="'animation-play-state:' + (animationPlay ? 'running' : 'paused')">
          <img :src="detail.al.picUrl + '?param=500y500'" />
        </div>
      </div>

      <div class="lyrics">
        <p :class="currentLyric.index ? 'activity' : ''">{{ currentLyric.first }}</p>
        <p :class="!currentLyric.index ? 'activity' : ''">{{ currentLyric.second }}</p>
      </div>
    </main>

    <footer>
      <div class="detail">
        <div class="star"><van-icon name="like" /></div>
        <div class="download"><van-icon name="down" /></div>
        <div class="comment"><van-icon name="chat-o" /></div>
      </div>

      <div class="duration">
        <div class="current-time">{{ formatMinute(musicCurrent) }}</div>
        <div class="prosress">
          <div class="box">
            <div class="inner" :style="'width: ' + (musicCurrent / musicTotal) * 100 + '%'">
              <div class="nonius"></div>
            </div>
          </div>
        </div>
        <div class="total-time">{{ formatMinute(musicTotal) }}</div>
      </div>

      <div class="control">
        <div class="pattren"><van-icon name="replay" /></div>
        <div class="left" @click="lastMusic"><van-icon name="arrow-left" /></div>

        <div class="pause" @click="taggle">
          <van-icon name="play-circle-o" v-if="!play" />
          <van-icon v-else name="pause-circle-o" />
        </div>

        <div class="right" @click="nextMusic"><van-icon name="arrow" /></div>
        <div class="list"><van-icon name="bars" /></div>
      </div>
    </footer>
  </div>
</template>

<script>
import { getSongs } from '../../request/api'
import { mapState, mapMutations } from 'vuex'
import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
dayjs.extend(duration)
import { Toast } from 'vant'

export default {
  data() {
    return {
      detail: {},
      lyric: [],
      animationPlay: false,

      currentLyric: {
        first: '',
        second: '',
        index: true,
      },
    }
  },

  created() {
    this.getMusicDteail(this.$route.params.id)
  },

  mounted() {
    Toast('如果没有播放，请手动播放')
  },

  computed: {
    ...mapState({
      musicIdList: state => state.mmusic.musicIdList,
      musicTotal: state => state.mmusic.musicTotal,
      musicCurrent: state => state.mmusic.musicCurrent,
      play: state => state.mmusic.play,
    }),

    artist() {
      const ar = this.detail.ar
      return ar ? ar.map(i => i.name).join() : ''
    },
  },

  watch: {
    musicIdList(n, o) {
      const id = n[0]
      this.musicInit(id)
    },

    play(n) {
      if (n) {
        setTimeout(() => {
          this.animationPlay = n
        }, 500)
      } else {
        this.animationPlay = n
      }
    },

    musicCurrent(n, o) {
      if (this.lyric == '该歌曲没有歌词' || !this.lyric || !Object.keys(this.lyric).length) {
        this.currentLyric.second = '该歌曲没有歌词'
        return
      }

      const i = this.lyric.findIndex(i => i.time > n)
      const { txt } = this.lyric[i]
      this.insertLyric(txt)
    },
  },

  methods: {
    ...mapMutations('mmusic', ['setPlay', 'InitMusicIdList']),

    insertLyric(lyr) {
      const { first, second } = this.currentLyric
      if (lyr == first || lyr == second) return
      if (this.currentLyric.index) {
        this.currentLyric.first = lyr
      } else {
        this.currentLyric.second = lyr
      }
      this.currentLyric.index = !this.currentLyric.index
    },

    taggle() {
      this.setPlay(!this.play)
    },

    //时间格式化
    formatMinute(ms) {
      return dayjs.duration(ms * 1000).format('mm:ss')
    },

    getMusicDteail(id) {
      if (Array.isArray(id)) {
        this.InitMusicIdList(id)
        return
      }

      if (this.musicIdList[0] == id) {
        this.musicIdList.shift()
      }

      let arr = [...this.musicIdList]
      let i = arr.shift()
      i && arr.push(i)
      arr.unshift(id)
      this.InitMusicIdList(arr)
    },

    musicInit(id) {
      getSongs.deail({ ids: id }).then(res => (this.detail = res.songs[0]))

      getSongs.getLyric({ id }).then(res => {
        this.currentLyric = {
          first: '',
          second: '',
          index: true,
        }

        if (res.nolyric) {
          this.lyric = '该歌曲没有歌词'
          return
        }

        const lyric = res.lrc.lyric.split('\n')

        const lyr = []
        lyric.forEach(item => {
          if (!item) return

          const time = item.match(/[0-9|:|.]+/)[0]
          const txt = item.slice(item.indexOf(']') + 1)

          lyr.push({
            time: dayjs
              .duration({
                m: time.slice(0, 2),
                s: time.slice(3, 5),
                ms: time.slice(6),
              })
              .asSeconds(),
            txt,
          })
        })

        this.lyric = lyr
      })
    },

    lastMusic() {
      if (this.musicIdList.length == 1) {
        document.getElementById('audio').load()
        return
      }

      const arr = [...this.musicIdList]
      const i = arr.pop()
      arr.unshift(i)
      this.InitMusicIdList(arr)
    },

    nextMusic() {
      if (this.musicIdList.length == 1) {
        document.getElementById('audio').load()
      }

      const arr = [...this.musicIdList]
      const i = arr.shift()
      arr.push(i)
      this.InitMusicIdList(arr)
    },
  },
}
</script>

<style lang="less" scoped>
@keyframes rotatePate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.con {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  color: #fff;

  .bg {
    height: 100%;
    width: 100%;

    filter: blur(5px) brightness(50%);

    transform: scale(1.5, 1.5);

    position: absolute;
    top: 0;
    left: 0;
  }

  header {
    display: flex;
    justify-content: space-between;
    font-size: 22px;
    .back,
    .share {
      padding: 5px 10px;
    }

    .title {
      position: relative;
      z-index: 1;
      font-size: 14px;
      text-align: center;
      line-height: 1.5;
      margin: 3px 0;

      p {
        margin: 0;
      }
      p:first-child {
        padding-top: 5px;
      }

      .primary {
        font-size: 16px;
      }

      .artist {
        font-size: 14px;
      }
    }
  }

  main {
    position: relative;
    z-index: 10;

    .picture {
      width: 80vw;
      height: 80vw;
      margin: auto;
      background: url('../../../public/images/play.png') no-repeat;
      background-size: cover;

      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;

      animation: rotatePate infinite linear 3s;
      // animation-delay: 500ms;

      img {
        width: 65%;
        border-radius: 50%;
      }
    }

    .aag {
      text-align: center;
      height: 18vh;

      img {
        position: relative;
        z-index: 11;
        height: 30vh;
        transform-origin: 28% 16%;
        transition: 500ms all;
        transform: translateX(25%) rotate(-25deg);
      }

      .play {
        transform: translateX(25%) rotate(0);
      }
    }

    .lyrics {
      padding: 10px 15vw;
      p {
        margin: 0;
        line-height: 2;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .activity {
        color: #409eff;
      }
    }
  }

  footer {
    position: fixed;
    bottom: 0;
    width: 100%;

    & > div {
      display: flex;
      justify-content: space-between;
      font-size: 22px;
      line-height: 1.5;
    }

    .detail {
      padding: 0 5vw;
    }

    .control {
      padding: 0 5vw;
      line-height: 2;
      .pause {
        transform: scale(2, 2);
      }
    }

    .duration {
      font-size: 14px;
      padding: 0 5vw;
      line-height: 2;

      .prosress {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 3px;

        .box {
          height: 3px;
          border-radius: 1.5px;
          background-color: #aaa;

          transition: all 60ms;

          .inner {
            background-color: #fff;
            height: 3px;
            position: relative;

            .nonius {
              position: absolute;
              right: -2px;
              top: -2px;
              width: 7px;
              height: 7px;

              background: #fff;
              border-radius: 50%;
            }
          }
        }
      }
    }
  }
}
</style>
